<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="60%" :title="`用户详情`">
    <el-form
      ref="integralAddFormRef"
      :rules="rules"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="100px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <div class="header-box" v-if="dialogData.workercompany.jobId">
        <span>主动投递</span>
        <span>
          应聘职位:<span class="info">{{ dialogData.workercompany.jobTitle }}</span>
        </span>
        <span>
          投递时间:<span class="info">{{ dialogData.workercompany.applyJob }}</span>
        </span>
      </div>

      <div class="info-box">
        <div class="worker-img">
          <img :src="getAvatorUrl(dialogData.itemInfo.avator)" alt="头像" srcset="" />
        </div>
        <div class="worker-info">
          <div class="name-box">
            <div class="name-item">{{ dialogData.itemInfo.name }}</div>
            <div>
              <el-button type="danger" :icon="Delete" text>我要举报</el-button>
            </div>
          </div>
          <div class="info-item">
            <span>{{ filterEnum(dialogData.itemInfo.gender - 0, genderType) }}</span>
            <span>|</span><span>{{ getAge(dialogData.itemInfo.birthDay) }} 岁</span><span>|</span>
            <span>{{ filterEnum(dialogData.itemInfo.eduId, degrees) }}</span>
            <span>|</span><span>{{ filterEnum(dialogData.itemInfo.wyearId, workYears) }}</span>
          </div>
          <el-form-item label="求职状态">
            <el-input :autosize="{ minRows: 3 }" type="textarea" readonly v-model="dialogData.itemInfo.workContent"></el-input>
          </el-form-item>
          <el-form-item label="个人能力">
            <el-tag v-for="(tag, idx) in dialogData.itemInfo.voskTags" :key="idx" style="margin-right: 10px" :rows="3">
              {{ tag.tagName }}
            </el-tag>
          </el-form-item>
          <el-form-item label="期望职位">
            <el-tag v-for="(tag, idx) in dialogData.itemInfo.expJobTypes" :key="idx" style="margin-right: 10px">
              {{ tag.name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="期望地区">
            {{ dialogData.itemInfo.expCityName }}{{ dialogData.itemInfo.expAreaName }}
          </el-form-item>
          <el-form-item label="期望薪资">
            {{ dialogData.itemInfo.expSalaryStart }} - {{ dialogData.itemInfo.expSalaryEnd }} 元/月
          </el-form-item>
          <div class="phone-item">
            <span>{{ dialogData.itemInfo.phone }}</span>
          </div>
          <div class="opt-item">
            <el-button type="danger" :icon="Download" size="large" class="good" @click="handleSaveWorker">
              感兴趣,立即联系
            </el-button>
            <el-button text @click="dialogVisible = false">在想想</el-button>
          </div>
        </div>
      </div>

      <div class="worker-extends">
        <div class="box1">
          <el-icon><Timer /></el-icon>
          <span>&nbsp;最近统计</span>
        </div>
        <div class="box2">
          <div class="box-title">{{ filterEnum(dialogData.workerweekcnt.activityType, workerActivityType) }}活跃</div>
          <div class="box-info">
            <span>
              主动申请了
              <span class="high-line">{{ dialogData.workerweekcnt.applyCnt }}</span>
              份工作
            </span>
            <span>
              查看了<span class="high-line">{{ dialogData.workerweekcnt.viewCpyCnt }}</span>
              Hr电话
            </span>
            <span>刚更新了工作经历</span>
          </div>
        </div>
        <div class="box2">
          <div class="box-title">{{ filterEnum(dialogData.workerweekcnt.attentionType, workerAttentionType) }}关注</div>
          <div class="box-info">
            <span>
              被下载 <span class="high-line">{{ dialogData.workerweekcnt.downloadCnt }}</span> 次，收到面试邀请
              <span class="high-line">{{ dialogData.workerweekcnt.interviewCnt }}</span>
              次
            </span>
            <span>
              被浏览
              <span class="high-line">{{ dialogData.workerweekcnt.viewCnt }}</span>
              次
            </span>
          </div>
        </div>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { Download, Delete, Timer } from "@element-plus/icons-vue";
import defaultAvatar from "@/assets/images/davator.png";
import { getWorkerInfoApi, getWorkerWeekCntInfoApi, getWorkerCompanyApi, getWorkerApi } from "@/api/modules/cpyswk/pol";
import { WorkerEntity, WorkerWeekCntEntity, WorkerCompanyEntity } from "@/biz/interface/WorkerType";
import { filterEnum, getAge } from "@/utils";
import { genderType } from "@/biz/datas/sysData";
import { degrees, workYears } from "@/biz/datas/formDrops";
import { workerActivityType, workerAttentionType } from "@/biz/datas/workerData";
//页面的数据
interface IntegralAddDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  //是否是审核状态
  isAudit: boolean;
  //当前的数据对象
  itemInfo: WorkerEntity;
  //其它的数据都继续在这里加
  workerweekcnt: WorkerWeekCntEntity;
  workercompany: WorkerCompanyEntity;
}
//提交按钮，避免多次提交
const btnLoading = ref(false);
//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<IntegralAddDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  isAudit: false,
  itemInfo: {
    // * 头像
    avator: "",
    // * 姓名
    name: "",
    // * 出生年
    birthYear: "",
    // * 工作经验
    worExperience: 0,
    // * 学历
    education: 0
  },
  workerweekcnt: {
    // 活跃度
    activityType: 1,
    // 关注度"
    attentionType: 1,
    // 上次修改简历时间
    refreshInfoDate: "",
    // 申请岗位数
    applyCnt: 0,
    //查看电话数
    viewCpyCnt: 0,
    // 被企业浏览数
    viewCnt: 0,
    // 被下载数
    downloadCnt: 0,
    // 被发面试通知数
    interviewCnt: 0,
    // 我的收藏数
    collectCnt: 0
  },
  workercompany: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;
  dialogData.isAudit = dialogData.optType === OptEnum.AUDIT;
  dialogData.title = getOptTitle(dialogData.optType);

  if (dialogData.optType === OptEnum.CREATE) {
    initItemInfo();
  } else if (dialogData.rowData && dialogData.rowData.id) {
    getItemInfo(dialogData.rowData.id);
  }

  dialogVisible.value = true;
};

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {
    // * 头像
    avator: "",
    // * 姓名
    name: "",
    // * 出生年
    birthYear: "",
    // * 工作经验
    worExperience: 0,
    // * 学历
    education: 0
  };
};

//数据较验
const rules = reactive({
  title: [{ required: true, message: "请填写标题", trigger: "blur" }]
});

//获取当前数据的详情，直接调用接口获取数据
const getItemInfo = async (id: string) => {
  if (id) {
    let { data } = await getWorkerInfoApi({ id });
    if (data) {
      dialogData.itemInfo = data as unknown as WorkerEntity;
    }

    //获取统计数
    let res = await getWorkerWeekCntInfoApi({ workerId: id });
    if (res.data) {
      dialogData.workerweekcnt = res.data as unknown as WorkerWeekCntEntity;
    }

    let res2 = await getWorkerCompanyApi({ workerId: id });
    if (res2.data) {
      dialogData.workercompany = res2.data as unknown as WorkerCompanyEntity;
    }
  }
};

// 下载简历
const handleSaveWorker = async () => {
  if (dialogData.itemInfo.id) {
    btnLoading.value = false;
    try {
      let res = await getWorkerApi({ id: dialogData.itemInfo.id });
      if (res.data) {
        ElMessage.success({
          message: `工友保存成功！`
        });
        //刷新列表数据
        emits("refresh-list");
        dialogVisible.value = false;
      } else {
        ElMessage.error(res.message);
      }
    } catch (error) {
    } finally {
      btnLoading.value = false;
    }
  }
};

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

//页面事件
const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.header-box {
  //   border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;

  span {
    // margin-left: 1rem;
    font-size: 0.9rem;
    color: rgb(136, 133, 133);
    font-weight: 400;

    .info {
      font-weight: 600;
      margin-left: 15px;
      color: rgb(94, 92, 92);
    }
  }
}

.info-box {
  //   border: 1px solid red;
  margin-top: 40px;
  display: flex;

  .worker-img {
    width: 260px;
    display: flex;
    justify-content: center;

    img {
      height: 160px;
    }
  }

  .worker-info {
    flex: 1;

    .name-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-item {
        height: 3rem;
        font-size: 2rem;
        margin-left: 1rem;
        font-weight: 700;
      }
    }

    .info-item {
      margin: 1rem 0;

      span {
        margin-left: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: rgb(136, 133, 133);
      }
    }

    .work-content {
    }

    .phone-item {
      margin-left: 1rem;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--el-color-primary);
    }

    .opt-item {
      margin: 1rem;

      .good {
        font-size: 1.2rem;
      }
    }
  }
}

.worker-extends {
  margin: 1rem 0;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .box1 {
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--el-color-primary);

    span {
      margin-right: 0.25rem;
    }
  }

  .box2 {
    flex: 1;
    padding: 1rem;
    height: 60px;
    // border-left: 2px solid rgb(233, 230, 230);
    // border: 1px solid red;
    display: flex;
    align-items: center;

    .box-title {
      width: 60px;
      height: 60px;
      border-radius: 10%;
      border: 3px solid var(--el-color-primary);

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 1rem;

      span {
        margin: 0.2rem 0;
        font-size: 0.85rem;
        font-weight: 500;
      }

      .high-line {
        color: red;
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0 0.2rem;
      }
    }
  }
}
</style>
